import React from 'react';
import { Card, Typography, Table } from 'antd';

const { Title, Paragraph } = Typography;

const IndustrySegmentation: React.FC = () => {
  const cardStyle = {
    backgroundColor: '#112240',
    borderColor: '#233554',
    marginBottom: '20px',
  };
  
  const cardHeadStyle = {
    backgroundColor: '#112240',
    borderBottomColor: '#233554',
  };
  
  const cardBodyStyle = {
    backgroundColor: '#112240',
  };

  // 行业细分数据
  const industryData = [
    {
      key: '1',
      industry: '新能源',
      segments: ['光伏', '风电', '储能', '氢能', '新能源汽车'],
      leadingStocks: '隆基绿能, 宁德时代, 比亚迪',
      marketValue: '5.2万亿',
    },
    {
      key: '2',
      industry: '半导体',
      segments: ['芯片设计', '晶圆制造', '封装测试', '设备材料'],
      leadingStocks: '中芯国际, 韦尔股份, 北方华创',
      marketValue: '3.8万亿',
    },
    {
      key: '3',
      industry: '医药生物',
      segments: ['创新药', '医疗器械', '医疗服务', 'CRO', '生物制品'],
      leadingStocks: '恒瑞医药, 迈瑞医疗, 药明康德',
      marketValue: '4.5万亿',
    },
    {
      key: '4',
      industry: '消费电子',
      segments: ['手机', '智能穿戴', 'AR/VR', '智能家居'],
      leadingStocks: '立讯精密, 歌尔股份, 闻泰科技',
      marketValue: '2.9万亿',
    },
    {
      key: '5',
      industry: '人工智能',
      segments: ['大模型', '算力', '数据中心', '智能软件'],
      leadingStocks: '寒武纪, 科大讯飞, 浪潮信息',
      marketValue: '1.8万亿',
    },
  ];

  const columns = [
    {
      title: '行业',
      dataIndex: 'industry',
      key: 'industry',
    },
    {
      title: '细分领域',
      dataIndex: 'segments',
      key: 'segments',
      render: (segments: string[]) => segments.join('、'),
    },
    {
      title: '龙头股',
      dataIndex: 'leadingStocks',
      key: 'leadingStocks',
    },
    {
      title: '市值规模',
      dataIndex: 'marketValue',
      key: 'marketValue',
    },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Card 
        title="行业细分分析" 
        style={cardStyle}
        headStyle={cardHeadStyle}
        bodyStyle={cardBodyStyle}
      >
        <Typography style={{ color: '#ccd6f6', marginBottom: '20px' }}>
          <Paragraph>
            行业细分是挖掘投资机会的重要维度，通过对细分行业的深入研究，可以发现更多具有成长性的投资标的。
            以下是当前市场主要行业的细分领域及代表性公司。
          </Paragraph>
        </Typography>
        
        <Table 
          dataSource={industryData} 
          columns={columns} 
          pagination={false}
          style={{ 
            backgroundColor: '#112240',
            color: '#ccd6f6'
          }}
        />
      </Card>
    </div>
  );
};

export default IndustrySegmentation;